<template>
  <div class="Header">
    <div class="logo">
      <img src="/img/rainlogbumyself.png" alt="" />
    </div>
    <!-- 导航菜单 -->
    <div class="nav-menu">
      <el-menu
        :default-active="activeIndex"
        mode="horizontal"
        @select="handleSelect"
      >
        <el-menu-item index="/" class="nav-menu-item">Home</el-menu-item>
        <el-menu-item index="/generator" class="nav-menu-item">
          Generator
        </el-menu-item>
        <!-- <el-menu-item index="/admin" class="nav-menu-item">
          System Admin
        </el-menu-item> -->
      </el-menu>
    </div>
  </div>
</template>

<script>
// import config from '../myConfig'
export default {
  data() {
    return {
      activeIndex: "/"
    };
  },
  mounted() {
    this.getRoutePath();
  },
  methods: {
    handleSelect(key) {
      this.$router.push(key);
    },
    getRoutePath() {
      this.activeIndex = this.$route.path;
    }
  }
};
</script>

<style lang="scss">
.Header {
  .logo {
    float: left;
    height: 80px;
    margin-left: 40px;
    width: 300px;
    img {
      height: 80px;
      width: auto;
    }
  }
  .nav-menu {
    float: right;
    height: 80px;
    .nav-menu-item {
      height: 80px;
      line-height: 80px;
    }
  }
}
</style>
